import React, { useState, useEffect } from "react";
import PropTypes from "prop-types";
// props-types校验包

function SonComponent(props) {
  console.log(props);
  // props.fn()
  const [msg, setMsg] = useState(props.count);

  // 每当 props.count 改变时，同步更新子组件的 msg 状态
  useEffect(() => {
    setMsg(props.count);
  }, [props.count]);

  const handleClick = function () {
    const newMsg = msg + 1;
    setMsg(newMsg);

    // emit触发
    props.onEmitzksCount(newMsg);
  };

  return (
    <div style={{ marginTop: "10px", border: "1px solid red" }}>
      <p>子组件的count值为---{msg}</p>
      <button onClick={handleClick}>子组件的++1</button>
      {/* 渲染你父组件传递的html元素 */}
      <p> jxs: {props.zks}</p>
      父组件双标签的数据——---{props.children}
    </div>
  );
}
// ning: Failed prop type: Invalid prop `count` of type `number` supplied to `SonComponent`,
SonComponent.propTypes = {
  count: PropTypes.number,
};
export default SonComponent;

// 常见的PropTypes类型
// PropTypes.string：字符串
// PropTypes.number：数字
// PropTypes.bool：布尔值
// PropTypes.array：数组
// PropTypes.object：对象
// PropTypes.func：函数
// PropTypes.node：任何可以被渲染的内容（数字、字符串、元素或数组）
// PropTypes.element：React 元素
// PropTypes.oneOf(['option1', 'option2'])：限制为某些特定值
// PropTypes.arrayOf(PropTypes.number)：特定类型的数组
// PropTypes.shape({ name: PropTypes.string, age: PropTypes.number })：特定结构的对象
